<template>
  <div class="data-format-right">
    <div class="item">
      <div class="item-num">
        <span>2356</span>
        <span>/</span>
        <span>31%</span>
      </div>
      <div class="item-text">原始库数据（条）</div>
    </div>
    <div class="item">
      <div class="item-num">
        <span>2134</span>
        <span>/</span>
        <span>28%</span>
      </div>
      <div class="item-text">标准库数据（条）</div>
    </div>
    <div class="item">
      <div class="item-num">
        <span>1758</span>
        <span>/</span>
        <span>23%</span>
      </div>
      <div class="item-text">主题库数据（条）</div>
    </div>
    <div class="item">
      <div class="item-num">
        <span>1294</span>
        <span>/</span>
        <span>18%</span>
      </div>
      <div class="item-text">专题库数据（条）</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent} from 'vue';

defineComponent({ name: 'DataFormatRight' });
</script>

<style scoped lang="scss">
.data-format-right {
  @apply w-[730px] h-[96px] mt-[50px] ml-[46px] flex justify-between;

  .item {
    @apply w-[170px] h-full relative;

    &:first-child {
      background: url('./assets/ys.png') no-repeat center;
    }

    &:nth-child(2) {
      background: url('./assets/bz.png') no-repeat center;
    }

    &:nth-child(3) {
      background: url('./assets/zt.png') no-repeat center;
    }

    &:last-child {
      background: url('./assets/ztk.png') no-repeat center;
    }

    .item-num {
      @apply absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 text-[30px] text-[#4CCAFF];
      font-family: D-DIN-PRO;

      span:nth-child(2) {
        @apply text-[#fff];
      }

      span:last-child {
        @apply text-[#fff] text-[24px];
      }
    }

    .item-text {
      @apply w-full absolute left-0 top-[25px] text-center text-[16px];
      font-family: "Alibaba PuHuiTi";
    }
  }
}
</style>
